<template>
  <div>
    <Form
      ref="form"
      :model="post"
      :rules="rules"
      :label-width="80"
      style="width: 90%; margin: auto;"
    >
      <FormItem label="标题：" prop="title">
        <Input type="text" v-model="post.title"></Input>
      </FormItem>
      <FormItem label="描述：" prop="desc">
        <Input
          v-model="post.desc"
          type="textarea"
          :autosize="{minRows: 2,maxRows: 5}"
          placeholder="文章描述"
        ></Input>
      </FormItem>
    </Form>
    <ShareSelect v-model="shareList" />
  </div>
</template>

<script>
import ShareSelect from "./ShareSelect";
export default {
  components: { ShareSelect },
  props: {
    value: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      post: {
        title: "",
        desc: ""
      },
      shareList: [],
      rules: {
        title: [
          {
            required: true,
            message: "标题必填"
          },
          {
            max: 32,
            message: "标题最长32位"
          }
        ]
      }
    };
  },
  methods: {
    validate() {
      return this.$refs.form.validate();
    }
  },
  watch: {
    value: {
      handler(value) {
        this.post = value;
      },
      deep: true,
      immediate: true
    },
    post: {
      handler(value) {
        this.$emit("input", value);
      },
      deep: true
    }
  }
};
</script>

<style>
</style>

